<template>
    <div class="register">

    </div>
    <div class="register">
        <Login ref="form" @on-submit="handleSubmit">
            <Email name="mail" />
            <Poptip trigger="focus" placement="right">
                <Password name="password" :rules="passwordRule" placeholder="至少6位密码，区分大小写"
                    @on-change="handleChangePassword" />
                <template #content>
                    <div class="register-tip">
                        <div class="register-tip-title" :class="passwordTip.class">
                            强度：{{ passwordTip.strong }}
                        </div>
                        <Progress :percent="passwordTip.percent" hide-info :stroke-width="6"
                            :stroke-color="passwordTip.color" />
                        <div class="register-tip-desc">
                            请至少输入 6 个字符。请不要使用容易被猜到的密码。
                        </div>
                    </div>
                </template>
            </Poptip>
            <Password name="passwordConfirm" :rules="passwordConfirmRule" placeholder="确认密码" />
            <Captcha name="captcha" :field="['mail']" @on-get-captcha="handleGetCaptcha" />
            <Submit>注册</Submit>
            
        </Login>
        <a href="/login" class="jump-login">使用已有账户登录</a>
    </div>

</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, getCurrentInstance,computed } from 'vue'
import { ComponentInternalInstance } from 'vue'
// import {Login} from 'view-ui-plus'
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const form = ref<null | any>(null)
// 密码长度，在密码强度提示时作为判断依据
const passwordLen = ref(0)
// 表单 验证规则
const validatePassCheck = (rule: any, value: string, callback: Function) => {
    if (value !== form.value?.formValidate.password) {
        callback(new Error('两次输入的密码不匹配！'));
    } else {
        callback();
    }
};
const passwordRule = [
    {
        required: true, message: '密码不能为空！', trigger: 'change'
    },
    {
        min: 6, message: '密码不能少于6位！', trigger: 'change'
    }
]
const passwordConfirmRule = [
    {
        required: true, message: '确认密码不能为空！', trigger: 'change'
    },
    { validator: validatePassCheck, trigger: 'change' }
]
// 密码长度
const handleChangePassword = (val: string) => {
    passwordLen.value = val.length;
}
// 提交
const handleSubmit = (valid: boolean, { mail, password }: { mail: string, password: string }) => {
    if (valid) {
        // 弹出信息用于确认
        proxy?.$Modal.info({
            title: '输入的内容如下：',
            content: 'mail: ' + mail + ' | password: ' + password
        });
    }
}
// 密码强度提示文案等
const passwordTip = computed(() => {
    let strong = '强';
    let className = 'strong';
    let percent = passwordLen.value > 10 ? 10 : passwordLen.value;
    let color = '#19be6b';

    if (passwordLen.value < 6) {
        strong = '太短';
        className = 'low';
        color = '#ed4014';
    } else if (passwordLen.value < 10) {
        strong = '中';
        className = 'medium';
        color = '#ff9900';
    }
    // 进度条来展示 密码强度
    return {
        strong,
        class: 'demo-register-tip-' + (passwordLen.value < 6) ? 'low' : (passwordLen.value < 10 ? 'medium' : 'strong'),
        percent: percent * 10,
        color
    }
})
// 获取邮箱验证码
const handleGetCaptcha = ({mail}:{mail:string})=>{
    console.log(mail)
}

</script>

<style scoped lang='scss'>
.register {
    width: 400px;
    margin: 0 auto !important;
}

.register .ivu-poptip,
.register .ivu-poptip-rel {
    display: block;
}

.register-tip {
    text-align: left;
}

.register-tip-low {
    color: #ed4014;
}

.register-tip-medium {
    color: #ff9900;
}

.register-tip-strong {
    color: #19be6b;
}

.register-tip-title {
    font-size: 14px;
}

.register-tip-desc {
    white-space: initial;
    font-size: 14px;
    margin-top: 6px;
}
::v-deep(.ivu-poptip-rel){
    width: 100%;
}
.jump-login{
    width: 100%;
    text-align: center;
    display: block;
    margin: 20px 0;
}
</style>
